(function ($) {
    var _global = {
        outHtml : function () {
            return '<div class="flavr-container modal center shown">' +
                    '    <div class="flavr-overlay"></div>' +
                    '    <div class="flavr-fixer">' +
                    '        <div class="flavr-outer">' +
                    '            <div class="flavr-content"><h1 class="flavr-title"></h1>' +
                                '<span class="btn-close"></span>' +
                    '               <div class="flavr-message"></div>' +
                    '            </div>' +
                    '            <div class="flavr-toolbar inline"></div>' +
                    '        </div>' +
                    '    </div>' +
                    '</div>';
        },
        outMiniHtml : function () {
            return '<div class="flavr-container modal center shown">' +
                '    <div class="flavr-overlay"></div>' +
                '    <div class="flavr-fixer mini">' +
                '        <div class="flavr-outer mini">' +
                '            <div class="flavr-content"><h1 class="flavr-title"></h1>' +
                '               <span class="btn-close"></span>' +
                '               <div class="flavr-message"></div>' +
                '            </div>' +
                '            <div class="flavr-toolbar inline"></div>' +
                '        </div>' +
                '    </div>' +
                '</div>';
        },
        options : function () {
            return {
                contentWidth : 420,
                contentHeight : 640,
                contentHtml : ''
            }
        }
    };

    function CreateFlavr(_option) {
        var _html = _global.outHtml();
        if(_option['type'] != undefined && _option['type'] == 2){
            _html = _global.outMiniHtml();
        }
        var _opt = $.extend(_global.options(), _option), _outObject = $(_html);

        _outObject.find('.flavr-fixer').css('top', _opt.contentHeight + 100);
        _outObject.find('.flavr-overlay').hide();

        _outObject.find('.flavr-content').css({
            'width' : _opt.contentWidth > 300 ? _opt.contentWidth : 300,
            'height' : _opt.contentHeight
        });

        _outObject.find('.flavr-message').html(_opt.contentHtml);

        _outObject.find('span.btn-close').on('tap', function () {
            _outObject.hideDialog();
        });

        _outObject.hideDialog = function () {
            if(typeof _option.onClose == 'function'){
                if(!_option.onClose(_outObject)){
                    return false;
                }
            }
            _outObject.find('.flavr-fixer').animate({'top' : _opt.contentHeight + 100}, 200, function () {
                _outObject.remove();
            });
        };

        _outObject.showDialog = function () {
            if($.getBrowser().versions.android){
                _outObject.find('.flavr-overlay').fadeIn(0);
                _outObject.find('.flavr-fixer').animate({'top' : 0}, 0);
            }else{
                _outObject.find('.flavr-overlay').fadeIn(300);
                setTimeout(function () {
                    _outObject.find('.flavr-fixer').animate({'top' : 0}, 300);
                }, 50);
            }
            if(typeof _option.onShow == 'function'){
                _option.onShow(_outObject);
            }
        };

        _outObject.content = function (_html,loadEvent) {
            _outObject.find('.flavr-message').html(_html);
            if(typeof loadEvent == 'function'){
                loadEvent(_outObject);
            }
        };

        $('body').append(_outObject);

        _outObject.showDialog();

    }

    /**
     * _option
     * @param _option
     *  contentWidth
     *  contentHeight
     *
     * @returns {CreateFlavr}
     */
    $.myFlavr = function (_option) {
        return new CreateFlavr(_option);
    }
})(jQuery);